<template>
	<div id="roleManage">
		<el-table  :data="allRoles" style="width: 100%" >
			<el-table-column label="角色名称">
				<template slot-scope="scope">
					<span class="span">
					{{scope.row.roleName}}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="角色描述">
				<template slot-scope="scope">
					<span>
					{{scope.row.roleDesc}}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="角色等级">
				<template slot-scope="scope">
					<span>
					{{scope.row.__v}}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row),
						editRole=true,editrole=scope.row">编辑</el-button>
					<el-button
				          size="mini"
				          type="danger"
				          @click="handleDelete(scope.$index, scope.row)">删除</el-button>		
				</template>
			</el-table-column>
		</el-table>
		<div id="btn" style="display: flex;justify-content: flex-start;">
			<el-button type="success" @click="addNewRole=true">新增角色</el-button>
		</div>
		<add-new-role 
			:addNewRole='addNewRole'></add-new-role>
		<edit-role-view 
			:editRole='editRole'
			:editrole='editrole'></edit-role-view>
		
	</div>
</template>

<script >
import addNewRole from './addNewRole'
import editRoleView from './editRoleView'
	export default{
		components:{addNewRole,editRoleView},
		data(){
			return {
				addNewRole:false,
				editRole:false,
				editrole:{}
			}
		},
		mounted(){
			this.$store.dispatch('loadAllRoles');
		},
		computed:{
			allRoles(){
				return	this.$store.getters.allRoles;
				
			},
		},
		methods:{
			   handleEdit(index,row) {
            		console.log(row);

	},
	        handleDelete(index,row) {
            	this.allRoles.splice(index, 1);
            	console.log(row._id)
               	var action=()=>{
					this.$http.post(this.$apis.deleteRole,{_id:row._id})
					.then((resp)=>{
						console.log(resp)
						this.$message({
							message:"删除成功",
							type:resp.data.success?"success":"danger"
						});
						if(resp.data.success){
							this.$store.dispatch('loadAllRoles')
						}
					})
				}
				this.operatorConfirm(action,"删除角色");
        }
	}
}
</script>

<style lang="scss" scoped>
	.el-table-column{
		width: 250px;
		
	}
</style>